<template>
  <div class="questionnaire">
    <div class="title">
      <el-button
        v-if="seenResult == true"
        icon="el-icon-folder"
        type="primary"
        round
        size="medium"
        @click="close('save')"
        >SAVE</el-button
      >
      <el-button
        v-if="seenResult == false"
        type="success"
        round
        size="medium"
        @click="close('back')"
        >Back</el-button
      >
      <span style="font-size: 23px; font-weight: 500; margin-left: 21%"
        >Breast Cancer Risk Assessment Questionnaire</span
      >
    </div>
    <!-- 这个div -->
    <div class="main-que">
      <div v-show="seenResult">
        <el-steps
          :active="steps.active"
          align-center
          finish-status="success"
          process-status="process"
          style="margin-top: 2%"
          class="pointer"
        >
          <el-step
            title="Personal Factors"
            description="1"
            @click.native="jumpTo(0)"
          ></el-step>
          <el-step
            title="Physiological Factors"
            description="2"
            @click.native="jumpTo(1)"
          ></el-step>
          <el-step
            title="Life And Habits"
            description="3"
            @click.native="jumpTo(2)"
          ></el-step>
          <el-step
            title="Health Information"
            description="4"
            @click.native="jumpTo(3)"
          ></el-step>
          <el-step
            title="Family History"
            description="5"
            @click.native="jumpTo(4)"
          ></el-step>
          <el-step
            title="Gene Test"
            description="6"
            @click.native="jumpTo(5)"
          ></el-step>
        </el-steps>
        <div v-if="steps.active === 0">
          <div class="questionModuleTitle">Personal Factors</div>
          <div class="que_answer"></div>
          <div class="que_answer">
            <el-form :model="form1">
              <el-form-item class="labelSize" label="1.姓名:">
                <el-input v-model="form1.name"></el-input>
              </el-form-item>
              <el-form-item label="2.出生日期:" class="labelSize">
                <br />
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form1.birthDate"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item class="labelSize" label="3.年龄:">
                <el-input v-model="form1.age"></el-input>
              </el-form-item>
              <el-form-item class="labelSize" label="4.性别:">
                <br />
                <el-radio-group v-model="form1.sex">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item class="labelSize" label="5.民族:">
                <br />
                <el-select placeholder="请选择" v-model="form1.nation">
                  <el-option label="汉族" value="hanzu" />
                  <el-option label="傣族" value="daizu" />
                  <el-option label="回族" value="huizu" />
                </el-select>
              </el-form-item>

              <el-form-item class="labelSize" label="6.身高(cm):">
                <el-input v-model="form1.height"></el-input>
              </el-form-item>

              <el-form-item class="labelSize" label="7.体重(kg):">
                <el-input v-model="form1.weight"></el-input>
              </el-form-item>

              <el-form-item class="labelSize" label="8.省份:">
                <br />
                <el-select placeholder="请选择" v-model="form1.province">
                  <el-option label="山东省" value="shandong" />
                  <el-option label="陕西省" value="shanxi" />
                  <el-option label="河南省" value="henan" />
                </el-select>
              </el-form-item>

              <el-form-item class="labelSize" label="9. B M I :">
                <el-input v-model="form1.bmi"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div v-if="steps.active === 1">
          <div class="questionModuleTitle">Physiological Factors</div>
          <div class="que_answer">
            <el-form>
              <el-form-item class="labelSize" label="1.您月经初潮的年龄(岁):">
                <el-input
                  placeholder="不清楚写0"
                  v-model="form2.menarcheAge"
                ></el-input>
              </el-form-item>
              <el-form-item class="labelSize" label="2.您生育过几个孩子:">
                <el-input v-model="form2.hasChildren"></el-input>
              </el-form-item>
              <div v-if="parseInt(form2.hasChildren) > 0">
                <el-form-item class="labelSize" label="2.1.您生育头胎时几岁?">
                  <el-input
                    placeholder="不清楚写0"
                    v-model="form2.firstChildAge"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  class="labelSize"
                  label="2.2.您母乳喂养的累积时间为多少个月?"
                >
                  <el-input v-model="form2.breastMilkMouth"></el-input>
                </el-form-item>
              </div>
              <el-form-item class="labelSize" label="3.您经历绝经了吗?">
                <br />
                <el-radio-group v-model="form2.isMenopause">
                  <el-radio label="尚未绝经"></el-radio>
                  <el-radio label="已绝经"></el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="form2.isMenopause == '已绝经'">
                <el-form-item class="labelSize" label="3.1.绝经年龄(岁)">
                  <br />
                  <el-input v-model="form2.menopauseAge"></el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
        <div v-if="steps.active === 2">
          <div class="questionModuleTitle">Life And Habits</div>
          <div class="que_answer">
            <el-form>
              <el-form-item class="labelSize" label="1.您吸烟吗?">
                <br />
                <el-radio-group v-model="form3.smoke">
                  <el-radio label="从不"></el-radio>
                  <el-radio label="偶尔"></el-radio>
                  <el-radio label="经常"></el-radio>
                  <el-radio label="已戒烟"></el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="form3.smoke != '从不' && form3.smoke != ''">
                <el-form-item class="labelSize" label="1.2.您烟龄有多长?">
                  <el-radio-group v-model="form3.smokeTime">
                    <el-radio label="少于6个月"></el-radio>
                    <el-radio label="6个月～5年"></el-radio>
                    <el-radio label="5～14年"></el-radio>
                    <el-radio label="15～24年"></el-radio>
                    <el-radio label="25年及以上"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <el-form-item
                class="labelSize"
                label="2.您平均每周有几天会被动吸烟?(被动吸烟指暴露在烟雾中15分钟)"
              >
                <el-radio-group v-model="form3.smokePerWeek">
                  <el-radio label="没有"></el-radio>
                  <el-radio label="1～2天"></el-radio>
                  <el-radio label="3～4天"></el-radio>
                  <el-radio label="5～6天"></el-radio>
                  <el-radio label="7天"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="labelSize" label="3.您饮酒吗?">
                <br />
                <el-radio-group v-model="form3.drink">
                  <el-radio label="从不"></el-radio>
                  <el-radio label="偶尔"></el-radio>
                  <el-radio label="经常"></el-radio>
                  <el-radio label="已戒酒"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div v-if="steps.active === 3">
          <div class="questionModuleTitle">Health Information</div>
          <div class="que_answer">
            <el-form>
              <el-form-item class="labelSize" label="1.您是否服用口服避孕药?">
                <br />
                <el-radio-group v-model="form4.isAcyeterion">
                  <el-radio label="从未服用"></el-radio>
                  <el-radio label="曾经服用"></el-radio>
                  <el-radio label="正在服用"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                class="labelSize"
                label="2.您是否使用过激素替代疗法?"
              >
                <br />
                <el-radio-group v-model="form4.isHormoneTherapy">
                  <el-radio label="从未服用"></el-radio>
                  <el-radio label="曾使用,已停用5年及以上"></el-radio>
                  <el-radio label="曾使用,已停用不到5年"></el-radio>
                  <el-radio label="正在使用"></el-radio>
                </el-radio-group>
              </el-form-item>
              <div
                v-if="
                  form4.isHormoneTherapy != '' &&
                  form4.isHormoneTherapy != '从未服用'
                "
              >
                <el-form-item
                  class="labelSize"
                  label="2.1.请说明使用激素替代疗法的原因:"
                >
                  <el-input
                    type="textarea"
                    v-model="form4.hormoneTherapyReason"
                  ></el-input>
                </el-form-item>
              </div>
              <el-form-item class="labelSize" label="3.您是否接受过胸部放疗？?">
                <br />
                <el-radio-group v-model="form4.isChestRadiotherapy">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
              <div
                v-if="
                  form4.isChestRadiotherapy != '' &&
                  form4.isChestRadiotherapy == '是'
                "
              >
                <el-form-item
                  class="labelSize"
                  label="3.1.请说明接受胸部放疗的原因:"
                >
                  <el-input
                    type="textarea"
                    v-model="form4.chestRadiotherapyReason"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  class="labelSize"
                  label="3.2.请说明接受胸部放疗的年龄:"
                >
                  <el-input v-model="form4.chestRadiotherapyAge"></el-input>
                </el-form-item>
              </div>
              <el-form-item
                class="labelSize"
                label="4.您是否曾在钼靶检查中被医生告知“乳腺组织致密”?"
              >
                <br />
                <el-radio-group v-model="form4.isDenseBreastTissue">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="labelSize" label="5.您是否接受过乳腺活检?">
                <br />
                <el-radio-group v-model="form4.breastBiopsyCount">
                  <el-radio label="从未活检"></el-radio>
                  <el-radio label="1次活检"></el-radio>
                  <el-radio label="2次活检及以上"></el-radio>
                </el-radio-group>
              </el-form-item>
              <div
                v-if="
                  form4.breastBiopsyCount != '' &&
                  form4.breastBiopsyCount != '从未活检'
                "
              >
                <el-form-item class="labelSize" label="5.1.您的乳腺活检结果是?">
                  <br />
                  <el-checkbox-group v-model="form4.breastBiopsyResult">
                    <el-checkbox label="导管原位癌"></el-checkbox>
                    <el-checkbox label="小叶原位癌"></el-checkbox>
                    <el-checkbox label="非典型导管增生"></el-checkbox>
                    <br />
                    <el-checkbox label="非典型小叶增生"></el-checkbox>
                    <el-checkbox label="纤维腺瘤"></el-checkbox>
                    <el-checkbox label="放射性瘢痕"></el-checkbox>
                    <br />
                    <el-checkbox label="硬化性腺病"></el-checkbox>
                    <el-checkbox label="导管增生"></el-checkbox>
                    <el-checkbox label="增生性乳腺纤维囊性变"></el-checkbox>
                    <br />
                    <el-checkbox label="其他"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
        <div v-if="steps.active === 4">
          <div class="questionModuleTitle">Family History</div>
          <el-button
            type="success"
            @click="addNewFamilyHistory()"
            style="
              font-size: 40px;
              border-radius: 18px;
              margin-left: 34%
              margin-top: 4%;
              text-align: center;
            "
            >添加患病亲属的信息</el-button
          >
          <el-divider></el-divider>
          <el-dialog
            title="个人及家族病史"
            :visible.sync="dialogVisible1"
            width="60%"
            :add="add"
          >
            <el-form :model="form5">
              <el-form-item
                class="labelSize"
                label="1.您或家族成员罹患过肿瘤吗?"
              >
                <br />
                <el-cascader
                  v-model="form5.familyValue"
                  :options="options"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
              <div
                v-if="form5.familyValue != '' && form5.familyValue != 'null'"
              >
                <el-form-item class="labelSize" label="2.请选择肿瘤类型?">
                  <br />
                  <el-radio-group v-model="form5.tumorType">
                    <el-radio label="乳腺癌"></el-radio>
                    <el-radio label="卵巢癌"></el-radio>
                    <el-radio label="输卵管癌"></el-radio>
                    <br />
                    <el-radio label="腹膜癌"></el-radio>
                    <el-radio label="胰腺癌"></el-radio>
                    <el-radio label="前列腺癌且Gleason评分≥7"></el-radio>
                    <br />
                    <el-radio label="李-佛美尼综合征"></el-radio>
                    <el-radio label="Cowden(多发性错构瘤)综合征"></el-radio>
                    <br />
                    <el-radio label="Peutz－Jegher(黑斑息肉)综合征"></el-radio>
                    <el-radio label="遗传性弥漫性胃癌综合症"></el-radio>
                    <el-radio label="其他"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <div v-if="form5.tumorType == '乳腺癌'">
                  <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      请上传病理检测报告，或<em>点击上传</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                </div>
                <div v-if="form5.tumorType == '其他'">
                  <el-form-item class="labelSize" label="2.1.请注明疾病:">
                    <el-input v-model="form5.ortherTumorType"></el-input>
                  </el-form-item>
                </div>
                <el-form-item
                  class="labelSize"
                  label="3.请注明当前或死亡时年龄(岁):"
                >
                  <el-input v-model="form5.currentOrDeathAge"></el-input>
                </el-form-item>
                <el-form-item class="labelSize" label="4.请注明诊断年龄(岁):">
                  <el-input v-model="form5.diagnosisAge"></el-input>
                </el-form-item>
                <div v-if="form5.tumorType == '乳腺癌'">
                  <el-form-item class="labelSize" label="5.是否三阴性乳腺癌?">
                    <br />
                    <el-radio-group v-model="form5.isThree">
                      <el-radio label="是" disabled></el-radio>
                      <el-radio label="否" disabled></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    class="labelSize"
                    label="6.乳腺癌原发病灶的数量?"
                  >
                    <el-input
                      v-model="form5.breastCancerNum"
                      disabled
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    class="labelSize"
                    label="7.乳腺癌原发病灶是否在双侧?"
                  >
                    <br />
                    <el-radio-group v-model="form5.isBothSides">
                      <el-radio label="是" disabled></el-radio>
                      <el-radio label="否" disabled></el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button v-if="add == true" @click="dialogVisible1 = false"
                >取 消</el-button
              >
              <el-button
                v-if="add == true"
                type="primary"
                @click="addDialog(form5)"
                >添 加</el-button
              >
              <el-button
                v-if="add == false"
                type="primary"
                @click="modifyDialog(form5)"
                >修改</el-button
              >
            </span>
          </el-dialog>
          <div style="width: 96%; margin-left: 2%">
            <el-table :data="form5Array" border style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" class="demo-table-expand">
                    <el-form-item label="是不是三阴性乳腺癌:">
                      <span>{{ props.row.isThree }}</span>
                    </el-form-item>
                    <el-form-item label="乳腺癌原发病灶数量:">
                      <span>{{ props.row.breastCancerNum }}</span>
                    </el-form-item>
                    <el-form-item label="乳腺癌原发病灶数量:">
                      <span>{{ props.row.isBothSides }}</span>
                    </el-form-item>
                    <div v-if="props.row.tumorType == '其他'">
                      <el-form-item label="其他肿瘤类型:">
                        <span>{{ props.row.ortherTumorType }}</span>
                      </el-form-item>
                    </div>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column label="家族成员" prop="familyValue" width="100">
              </el-table-column>
              <el-table-column label="肿瘤类型" prop="tumorType" width="240">
              </el-table-column>
              <el-table-column label="当前或死亡年龄" prop="currentOrDeathAge">
              </el-table-column>
              <el-table-column label="诊断年龄" prop="diagnosisAge">
              </el-table-column>
              <el-table-column label="上传文件" width="270"> </el-table-column>
              <el-table-column label="操作" width="230">
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    @click="deleteFamilyHistory(scope.$index)"
                    >Delete</el-button
                  >
                  <el-button
                    type="success"
                    size="mini"
                    icon="el-icon-edit"
                    @click="modifyFamilyHistory(scope.$index, scope.row)"
                    >Modify</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <br />
          </div>
        </div>

        <div v-if="steps.active === 5">
          <div class="questionModuleTitle">Gene Test</div>
          <el-button
            type="success"
            @click="addNewGeneTest()"
            style="
              font-size: 40px;
              border-radius: 18px;
              margin-left: 34%
              margin-top: 4%;
              text-align: center;
            "
            >添加基因检测的信息</el-button
          >
          <el-divider></el-divider>
          <el-dialog
            title="个人及家族病史"
            :visible.sync="dialogVisible2"
            width="60%"
            :add="add1"
          >
            <el-form :model="form6">
              <el-form-item
                class="labelSize"
                label="1.您或家族成员做过基因检测,并被证实携带基因变异吗?"
              >
                <br />
                <el-radio-group v-model="form6.isGeneDetection">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="form6.isGeneDetection == '是'">
                <el-form-item class="labelSize" label="2.受检者的身份">
                  <br />
                  <el-cascader
                    v-model="form6.familyValue"
                    :options="options1"
                    @change="handleChange1"
                  ></el-cascader>
                </el-form-item>
                <el-upload
                  class="upload-demo"
                  drag
                  action="填写自己需要的那个地址"
                  multiple
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    请上传基因检测报告，或<em>点击上传</em>
                  </div>
                  <div class="el-upload__tip" slot="tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </el-upload>
                <el-form-item class="labelSize" label="3.样本类型">
                  <br />
                  <el-checkbox-group v-model="form6.sampleType">
                    <el-checkbox label="胚系" disabled></el-checkbox>
                    <el-checkbox label="肿瘤组织" disabled></el-checkbox>
                    <el-checkbox label="不清楚" disabled></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item class="labelSize" label="4.检测的基因">
                  <el-input disabled v-model="form6.detectedGenes"></el-input>
                </el-form-item>
                <el-form-item class="labelSize" label="5.变异类型">
                  <br />
                  <el-checkbox-group v-model="form6.variationType">
                    <el-checkbox label="有害变异" disabled></el-checkbox>
                    <el-checkbox
                      label="良性或意义不明的变异"
                      disabled
                    ></el-checkbox>
                    <el-checkbox label="未检出" disabled></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </el-form>

            <span slot="footer" class="dialog-footer">
              <el-button v-if="add == true" @click="dialogVisible2 = false"
                >取 消</el-button
              >
              <el-button
                v-if="add1 == true"
                type="primary"
                @click="addDialog1(form6)"
                >添 加</el-button
              >
              <el-button
                v-if="add1 == false"
                type="primary"
                @click="modifyDialog1(form6)"
                >修改</el-button
              >
            </span>
          </el-dialog>

          <div style="width: 70%; margin-left: 15%">
            <el-table :data="form6Array" border style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" class="demo-table-expand">
                    <el-form-item label="样本类型:">
                      <span>{{ props.row.sampleType }}</span>
                    </el-form-item>
                    <el-form-item label="检测基因:">
                      <span>{{ props.row.detectedGenes }}</span>
                    </el-form-item>
                    <el-form-item label="变异类型:">
                      <span>{{ props.row.variationType }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column
                label="家族成员是否做过基因检测"
                prop="isGeneDetection"
                width="200"
              >
              </el-table-column>
              <el-table-column
                label="受检者身份"
                prop="familyValue"
                width="120"
              >
              </el-table-column>
              <el-table-column label="上传文件" width="250"> </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    @click="deleteGeneTest(scope.$index)"
                    >Delete</el-button
                  >
                  <el-button
                    type="success"
                    size="mini"
                    icon="el-icon-edit"
                    @click="modifyGeneTest(scope.$index, scope.row)"
                    >Modify</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <br />
          </div>
        </div>
        <div class="button_group">
          <el-button-group>
            <el-button
              v-if="steps.active != 0"
              type="primary"
              icon="el-icon-arrow-left"
              @click="goBack()"
              >上一页</el-button
            >
            <el-button
              v-if="steps.active != 5"
              type="primary"
              icon="el-icon-arrow-right"
              @click="goNext()"
              >下一页</el-button
            >

            <el-button
              type="success"
              icon="el-icon-position"
              @click="dialogVisible3 = true"
              >提交</el-button
            >
          </el-button-group>
        </div>
        <el-divider></el-divider>
      </div>
      <div v-show="!seenResult">
        <div class="supportSuccess">
          <el-button
            type="success"
            icon="el-icon-check"
            circle
            size="medium"
            style="font-size: 60px"
          ></el-button>
          已成功提交问卷
        </div>
        <div style="margin-left: 40%">
          <el-link disabled style="font-size: 18px"
            >{{ countDown }}s后将关闭问卷</el-link
          ><el-link
            style="font-size: 18px"
            type="primary"
            href="http://localhost:8080/#/questionnaireManagement/questionnaireReview"
            >进行跳转!</el-link
          >
        </div>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br />
        <br />
      </div>
    </div>
    <el-dialog
      title="请给问卷起名"
      :visible.sync="dialogVisible3"
      width="400px"
    >
      <el-form :model="questionnaireName" label-width="50px">
        <el-form-item label="命 名:">
          <el-input
            v-model="questionnaireName.input"
            placeholder="请输入内容"
          ></el-input
        ></el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questionnaireName: {
        input: "",
      },
      countDown: "", //倒计时
      add: false,
      add1: false,
      rowIndexModify: 0,
      rowIndexModify1: 0,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      form1: {
        name: "",
        birthDate: "",
        age: "",
        sex: "",
        nation: "",
        height: "",
        weight: "",
        province: "",
        bmi: "",
      },
      form2: {
        menarcheAge: "",
        hasChildren: "",
        firstChildAge: "",
        breastMilkMouth: "",
        isMenopause: "",
        menopauseAge: "",
      },
      form3: {
        smoke: "",
        smokeTime: "",
        smokePerWeek: "",
        drink: "",
      },
      form4: {
        isAcyeterion: "",
        isHormoneTherapy: "",
        hormoneTherapyReason: "",
        isChestRadiotherapy: "",
        chestRadiotherapyReason: "",
        chestRadiotherapyAge: "",
        isDenseBreastTissue: "",
        breastBiopsyCount: "",
        breastBiopsyResult: [],
      },
      form5: {
        familyValue: "",
        tumorType: "",
        ortherTumorType: "",
        currentOrDeathAge: "",
        diagnosisAge: "",
        isThree: "",
        breastCancerNum: "",
        isBothSides: "",
      },
      form5Array: [],
      form6: {
        isGeneDetection: "",
        familyValue: "",
        sampleType: [],
        detectedGenes: "",
        variationType: [],
      },
      form6Array: [],
      options: [
        {
          value: "me",
          label: "本人",
        },
        {
          value: "1",
          label: "一级亲属",
          children: [
            {
              value: "11",
              label: "父亲",
            },
            {
              value: "12",
              label: "母亲",
            },
            {
              value: "13",
              label: "兄弟",
            },
            {
              value: "14",
              label: "姐妹",
            },
            {
              value: "15",
              label: "儿子",
            },
            {
              value: "16",
              label: "女儿",
            },
          ],
        },
        {
          value: "2",
          label: "二级亲属",
          children: [
            {
              value: "21",
              label: "祖父",
            },
            {
              value: "22",
              label: "祖母",
            },
            {
              value: "23",
              label: "叔父",
            },
            {
              value: "24",
              label: "姑母",
            },
            {
              value: "25",
              label: "侄子",
            },
            {
              value: "26",
              label: "侄女",
            },
          ],
        },
        {
          value: "3",
          label: "三级亲属",
          children: [
            {
              value: "31",
              label: "祖父的父亲",
            },
            {
              value: "32",
              label: "祖父的母亲",
            },
            {
              value: "33",
              label: "祖父的兄弟",
            },
            {
              value: "34",
              label: "祖父的姐妹",
            },
            {
              value: "35",
              label: "祖母的父亲",
            },
            {
              value: "36",
              label: "祖母的母亲",
            },
          ],
        },
      ],
      options1: [
        {
          value: "me",
          label: "本人",
        },
        {
          value: "1",
          label: "一级亲属",
          children: [
            {
              value: "11",
              label: "父亲",
            },
            {
              value: "12",
              label: "母亲",
            },
            {
              value: "13",
              label: "兄弟",
            },
            {
              value: "14",
              label: "姐妹",
            },
            {
              value: "15",
              label: "儿子",
            },
            {
              value: "16",
              label: "女儿",
            },
          ],
        },
        {
          value: "2",
          label: "二级亲属",
          children: [
            {
              value: "21",
              label: "祖父",
            },
            {
              value: "22",
              label: "祖母",
            },
            {
              value: "23",
              label: "叔父",
            },
            {
              value: "24",
              label: "姑母",
            },
            {
              value: "25",
              label: "侄子",
            },
            {
              value: "26",
              label: "侄女",
            },
          ],
        },
        {
          value: "3",
          label: "三级亲属",
          children: [
            {
              value: "31",
              label: "祖父的父亲",
            },
            {
              value: "32",
              label: "祖父的母亲",
            },
            {
              value: "33",
              label: "祖父的兄弟",
            },
            {
              value: "34",
              label: "祖父的姐妹",
            },
            {
              value: "35",
              label: "祖母的父亲",
            },
            {
              value: "36",
              label: "祖母的母亲",
            },
          ],
        },
      ],
      questionModuleTitle: [
        "Personal Factors",
        "Physiological Factors",
        "Life And Habits",
        "Health Information",
        "Family History",
        "Gene Test",
      ],
      seenResult: true,
      steps: {
        active: 0,
      },
    };
  },
  watch: {
    "form1.sex"(newV, oldV) {
      if ((oldV = "男")) {
        this.steps.active = 4;
      }
    },
  },
  mounted() {},
  methods: {
    //提交后五秒关闭问卷
    fiveGo() {
      const TIME_COUNT = 5;
      if (!this.timer) {
        this.countDown = TIME_COUNT;
        this.show = false;
        //定时器
        this.timer = setInterval(() => {
          if (this.countDown > 0 && this.countDown <= TIME_COUNT) {
            this.countDown--;
          } else {
            this.show = true;
            //清除定时器
            clearInterval(this.timer);
            this.timer = null;
            //跳转的页面写在此处
            this.$router.push({
              path: "/questionnaireManagement/personalQuestionnaires",
            });
          }
        }, 1000);
      }
    },
    goBack() {
      if (this.steps.active != 0) {
        this.steps.active--;
      }
    },
    goNext() {
      if (this.steps.active != 5) {
        this.steps.active++;
      }
    },
    handleChange(value) {
      //console.log(value, 111);
    },
    handleChange1(value) {
      //console.log(value, 111);
    },
    //进度条跳转
    jumpTo(val) {
      this.steps.active = val;
    },
    confirm() {
      this.dialogVisible3 = false;
      this.fiveGo();
      this.seenResult = false;
    },
    //再填一份
    moreAgain() {
      this.seenResult = true;
      this.steps.active = 0;
    },
    //打开家族模块的填写表
    addNewFamilyHistory() {
      this.dialogVisible1 = true;
      this.add = true;
    },
    //添加家族史的信息(对话框)
    addDialog(value) {
      //每次添加要将表清空
      this.form5 = {
        familyValue: "",
        tumorType: "",
        ortherTumorType: "",
        currentOrDeathAge: "",
        diagnosisAge: "",
        isThree: "",
        breastCancerNum: "",
        isBothSides: "",
      };
      //确定选定的是家族中的谁
      value.familyValue = value.familyValue[value.familyValue.length - 1];
      //放入数组当中

      this.form5Array.push(value);
      //关闭弹框

      this.dialogVisible1 = false;
      console.log(this.form5Array);
    },
    //修改家族史的信息(对话框)
    modifyDialog(value) {
      value.familyValue = value.familyValue[value.familyValue.length - 1];
      this.form5Array[this.rowIndexModify] = value;
      this.dialogVisible1 = false;

      this.form5 = {
        familyValue: "",
        tumorType: "",
        ortherTumorType: "",
        currentOrDeathAge: "",
        diagnosisAge: "",
        isThree: "",
        breastCancerNum: "",
        isBothSides: "",
      };
    },
    //删除家族史的信息(表格)
    deleteFamilyHistory(rowIndex) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(rowIndex);
          //删除数据
          this.form5Array.splice(rowIndex, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改家族史的信息(表格)
    modifyFamilyHistory(rowIndex, rowInformation) {
      console.log(rowInformation);
      //确定为修改按钮
      this.add = false;
      this.form5 = this.form5Array[rowIndex];
      this.rowIndexModify = rowIndex;
      this.dialogVisible1 = true;
    },
    //--------------------------------------------------------------------------------------------------------
    //打开基因测试的填写表
    addNewGeneTest() {
      this.dialogVisible2 = true;
      this.add1 = true;
    },
    //添加基因检测的信息(对话框)
    addDialog1(value) {
      //每次添加要将表清空
      this.form6 = {
        isGeneDetection: "",
        familyValue: "",
        sampleType: [],
        detectedGenes: "",
        variationType: [],
      };
      //确定选定的是家族中的谁
      value.familyValue = value.familyValue[value.familyValue.length - 1];
      //放入数组当中

      this.form6Array.push(value);
      //关闭弹框

      this.dialogVisible2 = false;
      console.log(this.form6Array);
    },
    //修改基因检测的信息(对话框)
    modifyDialog1(value) {
      value.familyValue = value.familyValue[value.familyValue.length - 1];
      this.form6Array[this.rowIndexModify1] = value;
      this.dialogVisible2 = false;

      this.form6 = {
        isGeneDetection: "",
        familyValue: "",
        sampleType: [],
        detectedGenes: "",
        variationType: [],
      };
    },
    //删除基因检测的信息(表格)
    deleteGeneTest(rowIndex) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(rowIndex);
          //删除数据
          this.form6Array.splice(rowIndex, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改基因检测的信息(表格)
    modifyGeneTest(rowIndex, rowInformation) {
      console.log(rowInformation);
      //确定为修改按钮
      this.add1 = false;
      this.form6 = this.form6Array[rowIndex];
      this.rowIndexModify1 = rowIndex;
      this.dialogVisible2 = true;
    },

    //保存当下写的问卷
    close(value) {
      this.$router.push("/questionnaireManagement/personalQuestionnaires");
      if (value == "save") {
        this.$message({
          type: "success",
          message: "保存成功",
        });
      }
    },
  },
};
</script>

<style scoped>
.questionnaire {
  border-radius: 18px;
  margin: 15px auto;
  background-color: #fff;
  width: 1200px;
  box-shadow: 0 0 25px #cac6c6;
}
.title {
  background-color: #64bbe742;
  width: 1200px;
  border-radius: 18px;
}
.questionModuleTitle {
  line-height: 50px;
  margin: 15px auto;
  color: #1f1f1f;
  font-weight: 500;
  font-size: 25px;
  margin-top: 1%;
  background-color: #64bbe742;
  width: 500px;
  border-radius: 8px;
  text-align: center;
}
.que_answer {
  width: 750px;
  margin: 35px;
  margin-left: 20%;
}
.button_group {
  margin-left: 70%;
}
.supportSuccess {
  margin: 15px auto;
  margin-top: 24%;
  text-align: center;
  font-size: 60px;
  width: 800px;
  background-color: #64bbe742;
}
</style>
<style>
.labelSize .el-form-item__label {
  text-align: justify;
  text-align-last: justify;

  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.678);
}
.labelSize .el-radio__label {
  font-size: 20px;
}
.labelSize .el-checkbox__label {
  font-size: 20px;
}
.labelSize .el-radio__inner {
  width: 18px;
  height: 18px;
}
.pointer {
  cursor: pointer;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  color: #000000;
  font-size: 16px;
}
.demo-table-expand .el-form-item {
  margin-left: 5%;
}
</style>